@charset "UTF-8";
/*!
	重要的注释，被压缩的话也还保留.用于声明版权
*/

//sass基本用法集合
div{
	float: left;
	width: 100px;
	height: 120px;
	margin-right: 20px;
	border-width: 2px;
	border-style: solid;
}
$color1 : #f34ed2;
.div1{
	color: $color1;
}
//变量用在字符串的情况
$sider:right;
$sidet:top;
.div2{
	border:1px $color1 solid;
	border-#{$sidet}-#{$sider}-radius:15px;
}
//属性嵌套的写法
.div3{
	border:{
		color: red;
	}
}
//&引用父元素。
.div4{
	&:hover{
		border-color: blue;
	}
}
/*代码的重用*/
//继承
.div5{
	@extend .div1;
	font-size: 20px;
}
//@mixin定义可以重用的代码块@include来调用这个mixin
$du:40%;
@mixin bg-color{//不带参数的代码块
	background-color: aqua;
}
@mixin bg-color($value:#e8f434){//带参数的代码块
	background-color:lighten($value,$du);
}
@mixin rounded($var1,$var2,$radius:10px){
	border-#{$var1}-#{$var2}-radius:$radius;
	-moz-border-#{$var1}-#{$var2}-radius:$radius;
	-webkit-border-#{$var1}-#{$var2}-radius:$radius;
}
.div6{
	@include bg-color;
	@include rounded(top,left,50px);//可以缺省后面的参数，参数是按照顺序传入的，能缺省的值放在后面
	//@include bg-color($color1);
}
//颜色函数
.div7{
	background-color:lighten(yellow, 10%);//变亮
	//background-color:darken(yellow ,10%);//变暗
	//background-color:grayscale(yellow );//灰度图像
	//background-color:complement(yellow);//互补色
}
/*高级语法，条件，循环，函数*/
.div8{
	@if $du < 30% {
		background-color: #000;//条件语句
	} @else{
		background-color: deepskyblue;
	}
}
.div9{
	@for $i from 1 to 5{//for循环
		.li#{$i}{
			color: lighten(yellow,10% * $i);
		}
	}
}
.div10{
	$j:1;
	@while $j <5{
		.item#{$j}{
			color: lighten(yellow,20% * $j);
			$j:$j + 1;
		}
	}
}

